import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { FormInstance } from 'antd/lib/form';
import { Modal, Button, Table } from 'antd';
import PropTypes from 'prop-types';

const mapStateToProps = (state: any) => ({
  serviceCapabilityDetail: state.serviceCapabilityDetail,
});
const statusEnums: any = { '0': '正常', '1': '停用' };
class _ViewModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.array,
  };
  state = {
    loading: false,
    accountData: JSON.parse(sessionStorage.getItem('serviceCapabilityDetailData') ?? '{}'),
    tableList: [],
  };
  componentDidUpdate(prevProps: any) {
    const { modalVisible } = this.props;
    if (modalVisible && modalVisible !== prevProps.modalVisible) {
      this.getTableList();
    }
  }

  close = (refresh = false) => {
    const { closeModal } = this.props;
    this.formRef.current && this.formRef.current.resetFields();
    closeModal(refresh);
  };
  getTableList = () => {
    const { dispatch, formData } = this.props;
    const { accountData } = this.state;
    this.setState({ loading: true });
    dispatch({
      type: 'serviceCapabilityDetail/postObjWithRes',
      payload: {
        url: '/msaggregationmap/serviceconfigration/keylist',
        accountId: accountData.id,
        serviceCode: formData.serviceCode,
      },
      callback: (res: any) => {
        if (res.statusCode === '0') {
          this.setState({
            tableList: res.data ?? [],
          });
        }
      },
    }).finally(() => this.setState({ loading: false }));
  };
  render() {
    const { formData, modalVisible } = this.props;
    const { loading, tableList, pagination } = this.state;
    const footer = (
      <div>
        <Button size="small" onClick={() => this.close()}>
          取消
        </Button>
        <Button size="small" loading={loading} onClick={this.handleSubmit} type="primary">
          确定
        </Button>
      </div>
    );
    const columns = [
      {
        title: 'key',
        dataIndex: 'secretKey',
        width: 150,
        ellipsis: true,
      },
      {
        title: '单日调用次数上限',
        dataIndex: 'dailyCallLimit',
        width: 150,
        ellipsis: true,
        render: (v: any) => v ?? '无限制',
      },
      {
        title: '单日调用错误次数上限',
        dataIndex: 'dailyErrorLimit',
        width: 150,
        ellipsis: true,
      },
      {
        title: '状态',
        dataIndex: 'status',
        width: 150,
        ellipsis: true,
        render: (v: string | number) => statusEnums[v],
      },
    ];

    return (
      <Modal
        title={'key'}
        footer={null}
        visible={modalVisible}
        width={700}
        onCancel={() => this.close()}
      >
        <Table
          size={'small'}
          rowKey={'secretKey'}
          dataSource={tableList}
          loading={loading}
          columns={columns}
          pagination={false}
        />
      </Modal>
    );
  }
}
export const ViewModal = connect(mapStateToProps)(_ViewModal);
